// reset style sheet
@import "reset";

/** 美化原生滚动条 */
* {
  // 整个滚动条
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  // 滚动条上的滚动滑块
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    opacity: 0.3;
    background-color: #909399;
  }
  &::-webkit-scrollbar-thumb:hover {
    // opacity: 0.5;

    // background-color: #909399;
    background-color: rgb(#909399, 0.5);
  }
  &::-webkit-scrollbar-thumb:active {
    background-color: #90939999;
  }

  // 当同时有垂直滚动条和水平滚动条时交汇的部分
  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  // ::-webkit-scrollbar {
  //   // 更改滚动条的宽度或高度
  //   width: 13px;
  //   height: 13px;
  //   padding: 10px; /* 设置滚动条容器的内边距 */
  //   background-color: #f1f1f1;

  //   // border: 1px solid #f1f1f1;
  // }

  // /* 滚动条滑块 */
  // ::-webkit-scrollbar-thumb {
  //   background-color: rgb(0 0 0 / 40%);
  //   background-clip: padding-box; // 剪切背景
  //   border: 3px solid transparent;
  //   border-radius: 7px;
  // }

  // /* 滚动条轨道 */
  // ::-webkit-scrollbar-track {
  //   background-color: transparent;
  // }
}
